<template>
	<view class="container padding-lr">
		<view class="listBox padding-top">
			<view class="listItem">
				<view class="min_qiu fixbox"></view>
				<!-- <view class="max_qiu fixbox"></view> -->
				<view class="mconbox">
					<view class="flex align-center padding-lr">
						<view class="text-lg flex-sub text-white">账户余额（元）</view>
						<view class="ca_staut text-ngreen"><text class="text-sm text-white">60586596</text></view>
					</view>
					<view class="camainMsg text-white text-sm padding-lr">
						<view class="ca_tit flex-sub text-cuts"><text class="text-white text-bold">2236.58</text></view>
					</view>
					<view class="cbot_btn margin-top-sm padding-top-sm flex align-center text-ngreen">
						<view class="flex-sub"></view>
						<view class="text-white">
							<view class="d_ib padding-lr">更换手机号</view>
							|
							<view class="d_ib padding-lr">解绑</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="detNav flex align-center"><view class="text-c9 text-c6">消费记录</view></view>
		<scroll-view class="vscrList margin-top-sm" scroll-y="true">
			<view class="padding-lr-sm padding-top-xs">
				<view class="padding-tb-xs" v-for="(item, index) in 10" :key="index">
					<view class="flex align-center">
						<view class="">商城微信支付</view>
						<view class="flex-sub text-bold text-nred text-end text-cuts padding-left-sm">-55.6</view>
					</view>
					<view class="flex align-center padding-top-sm">
						<view class="text-c9 text-sm">2022-11-18 09:53:51</view>
						<view class="flex-sub text-end text-cuts padding-left-sm">
							余额：
							<text class="text-bold">1000</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	// import { onShow } from '@dcloudio/uni-app';

</script>

<style lang="scss">
	.container {
		&.pad {
			padding-bottom: 160rpx;
		}
	}
	.vscrList {
		width: 100%;
		height: calc(100vh - 480rpx);
		background: #fff;
		box-shadow: 0px 2px 18rpx rgba(0, 0, 0, 0.08);
		border-radius: 16rpx;
	}
	.acon-logo {
		font-size: 60rpx;
	}
	.detNav {
		height: 50rpx;
	}
	.listItem {
		width: 100%;
		min-height: 330rpx;
		border-radius: 16rpx;
		background: #56bf7a;
		box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.08);
		position: relative;
		overflow: hidden;
		margin-bottom: 20rpx;
		// &.gry {
		// 	background: #f5f5f5;
		// 	.fixbox {
		// 		background: #eeeeee;
		// 	}
		// 	.ca_staut,
		// 	.ca_tit,
		// 	.camainMsg,
		// 	.moredis,
		// 	.surnums {
		// 		color: #999;
		// 	}
		// }
		&.minpad {
			.camainMsg {
				padding-top: 20rpx;
			}
			.ca_dis {
				margin-top: 6rpx;
			}
		}
		.mconbox {
			position: relative;
			z-index: 3;
			padding-bottom: 30rpx;
			padding-top: 40rpx;
		}
		.min_qiu {
			width: 334rpx;
			height: 334rpx;
			right: -100rpx;
			top: -120rpx;
		}
		// .max_qiu {
		// 	width: 508rpx;
		// 	height: 508rpx;
		// 	left: -48rpx;
		// 	top: -324rpx;
		// }
		.fixbox {
			position: absolute;
			z-index: 1;
			background: linear-gradient(121.84deg, rgba(27, 186, 207, 0.5) -75.46%, rgba(86, 191, 122, 0.5) 87.98%);
			box-shadow: inset 0px 2px 18px rgba(0, 0, 0, 0.08);
			border-radius: 50%;
		}
		.ca_tit {
			font-size: 60rpx;
		}
	}
	.camainMsg {
		padding-top: 50rpx;
	}
	.moredis {
		margin-right: 120rpx;
	}
	.cdtext {
		overflow: hidden;
		white-space: nowrap;
	}
	// .actBtn {
	// 	@include baseTag(192rpx, 56rpx);
	// 	border-radius: 56rpx;
	// 	border: 1px solid #56bf7a;
	// }
	// .buyBtn {
	// 	@include baseTag(142rpx, 56rpx);
	// 	border-radius: 56rpx;
	// 	background: #56bf7a;
	// 	color: #fff;
	// }
	// .butips {
	// 	color: #bccef4;
	// 	opacity: 0.9;
	// }
</style>